// 第一种:常规定义自定义标签的方式
class mlBtn extends HTMLElement {
    constructor() {
        super();
        let p = this.h('p');
        p.innerText = 'hello mingle';
        p.setAttribute('style', 'color: green;fontSize: 16px;');
         //表示 shadow DOM 子树的根节点。
         const shaDow = this.attachShadow({mode: "open"});
         shaDow.appendChild(p);
    }
    h(tag) {
        return document.createElement(tag);
    }
    /**
     * 生命周期
     */
    //当自定义元素第一次被连接到文档 DOM 时被调用。
    connectedCallback () {
        console.log('我已经插入了！！！嗷呜')
    }
 
    //当自定义元素与文档 DOM 断开连接时被调用。
    disconnectedCallback () {
        console.log('我已经断开了！！！嗷呜')
    }
 
    //当自定义元素被移动到新文档时被调用
    adoptedCallback () {
        console.log('我被移动了！！！嗷呜')
    }
    //当自定义元素的一个属性被增加、移除或更改时被调用
    attributeChangedCallback () {
        console.log('我被改变了！！！嗷呜')
    }
}

window.customElements.define('ml-btn', mlBtn);




// 第二种:template模式

class mlBox extends HTMLElement {
    constructor() {
        super();
        let template = this.h('template');
        template.innerHTML = `
            <div>我是mlBox</div>
            <style>
                div {
                    width: 100px;
                    height: 160px;
                    background-color: blue;
                    color: white;
                }
            </style>
        `;
        console.log({ template});
         //表示 shadow DOM 子树的根节点。
         const shaDow = this.attachShadow({mode: "open"});
         shaDow.appendChild(template.content.cloneNode(true));
    }
    h(tag) {
        return document.createElement(tag);
    }
    /**
     * 生命周期
     */
    //当自定义元素第一次被连接到文档 DOM 时被调用。
    connectedCallback () {
        console.log('我已经插入了！！！嗷呜')
    }
 
    //当自定义元素与文档 DOM 断开连接时被调用。
    disconnectedCallback () {
        console.log('我已经断开了！！！嗷呜')
    }
 
    //当自定义元素被移动到新文档时被调用
    adoptedCallback () {
        console.log('我被移动了！！！嗷呜')
    }
    //当自定义元素的一个属性被增加、移除或更改时被调用
    attributeChangedCallback () {
        console.log('我被改变了！！！嗷呜')
    }
}

window.customElements.define('ml-box', mlBox);